<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            position: relative;
        }
        .start {
            position: absolute;
            width: 110px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            border-radius: 15px;
            color: white;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 10;
            background-color: purple;
        }
        .box {
            width: 300px;
            text-align: center;
            line-height: 200px;
            height: 200px;
            background-color: plum;
            margin: 0px auto;
            font-size: 30px;
            position: relative;
        }
        button {
            position: absolute;
        }
        .previous{
            left: 0px;
            bottom: 0px;
            display: none;
        }
        .next{
            right: 0px;
            bottom: 0px;
            display: none;
        }
        .box div {
            display: flex;
            justify-content: center;
        }
        .active {
            color: yellow;
        }
        .activeErr {
            color: red;
        }
        .activeTrue {
            color: rgb(68, 7, 233);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <div>
            </div>
            <button class="previous">上一个</button>
            <button class="next">下一个</button>
        </div>
        <div class="start">
            游戏开始
        </div>
    </div>
    
    <script>

        function getRandom ( max , min ) {
            var res = parseInt(Math.random() * ( max + 1 - min )) + min ; 
            return res ; 
        }

        function createWord (){
            var wordLength = getRandom ( 10 , 5 );
            var wordStr = '' ;
            for(var i = 0 ; i < wordLength; i ++ ){
                var charStr = String.fromCharCode(getRandom(122,97)) ;
                wordStr = wordStr + charStr ; 
            } 
            return wordStr ;
        }
        function renderDom( str ){
            var arr = str.split("");
            var wordEle = document.querySelector(".box > div");
            wordEle.innerHTML = '' ;
            arr.forEach(function(item,key){
                var div = document.createElement("div");
                div.className = "active";
                div.innerHTML = item ; 
                wordEle.appendChild(div);
            });
        }

        var boxEle = document.querySelector(".box");
        var wordEle = document.querySelector(".box > div");
        var startEle = document.querySelector(".start");
        var preEle = document.querySelector(".previous");
        var nextEle = document.querySelector(".next");
        var wordArr = [] ; 
        startEle.onclick = function (){
            var flag = 0 ; 
            startEle.style.display = 'none' ;
            if ( flag == 0 ){
                preEle.style.display = 'none' ;
            }
            nextEle.style.display = 'block' ;
            wordArr.push(createWord());
            renderDom(wordArr[flag]);
            keyDown() ; 
            nextEle.onclick = function (){
                flag ++ ;
                if ( flag >= 1 ){
                    preEle.style.display = 'block' ;
                }
                if ( wordArr[flag] == undefined ){
                    wordArr.push(createWord());
                    renderDom(wordArr[flag]);
                    keyDown();
                } else {
                    renderDom(wordArr[flag]);
                    keyDown();
                }
            }
            preEle.onclick = function () {
                flag -- ;
                if ( flag == 0 ){
                    preEle.style.display = 'none' ;
                }
                renderDom(wordArr[flag]);
                keyDown();
            }
        }

        function keyDown(){
            var count = 0 ;
            document.onkeydown = function ( event ){
                var e = event || window.event ;
                var key = e.key ;
                var charEles = document.querySelectorAll(".box > div > div");
                // console.log(charEles[count].innerHTML)
                if ( charEles[count].innerHTML == key ) {
                    charEles[count].className = " activeTrue"
                } else {
                    charEles[count].className = "activeErr"
                }
                count ++ ; 
                if ( count == charEles.length){
                    setTimeout(function(){
                        nextEle.click();
                    },500);
                }
            }
        }
    </script>
</body>
</html>